<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <a-table :rowKey="record=>record.id" bordered :columns="columns" :data-source="data">
      <span slot="icon" slot-scope="icon">
        <img :src="`../${icon}`" />
        <!-- ../img/assets/social/wechat_enterprise.png -->
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="bindApp(record)" v-if="record.userId == null" style="color: #ff4d4f;">绑定账号</a>
        <a-divider v-if="record.userId == null" type="vertical" />

        <a-popconfirm title="确定要解除绑定吗?" ok-text="确定" cancel-text="放弃" @confirm="confirm(record)" @cancel="cancel">
          <a v-if="record.userId != null" style="color: #ff4d4f;">解除绑定</a>
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '图标',
    dataIndex: 'icon',
    key: 'icon',
    scopedSlots: { customRender: 'icon' },
  },
  {
    title: '供应商',
    dataIndex: 'provider',
    key: 'provider',
  },
  {
    title: '供应商名称',
    dataIndex: 'providerName',
    key: 'providerName',
  },
  {
    title: '绑定时间',
    dataIndex: 'createdDate',
    key: 'createdDate',
  },
  {
    title: '最近登录时间',
    dataIndex: 'updatedDate',
    key: 'updatedDate',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
]

import dispose from "../../api/dispose";
export default {
  data() {
    return {
      endOpen: false,
      data: [],
      columns,
      selectedRowKeys: [], // 选中此处以配置默认列
      loading: false,
      loading1: false,
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  mounted() {
    this.init()
  },
  watch: {
  },
  methods: {
    confirm(e) {
      this.deleteApp(e)
    },
    cancel(e) {
      console.log(e);
    },
    deleteApp(val) {
      let ids = val.id;
      dispose.deleteAppApi(ids).then((res) => {
        if (res.data.code == 0) {
          this.$message.success('操作成功');
          this.init()
        }
      });
    },
    bindApp(val) {
      dispose.bindAppApi(val.provider).then((res) => {
        if (res.data.code == 0) {
          window.location.href = res.data.data
        }
      })
    },
    init() {
      dispose.getThirdPartyLogin().then((res) => {
        this.data = res.data.data;
        for (let index = 0; index < this.data.length; index++) {
          this.data[index].icon = "img/" + this.data[index].icon;
        }
      });
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>

<style scoped>
.ant-table-wrapper {
  background: #fff;
}
</style>
